<template>
  <view class="reply">
    <view class="top">
      <comment-item :item="replyItem" :childState="true" :closeBtn_state="true"></comment-item>
    </view>
    <uni-load-more :status="load_more" v-if="!childComment.length"></uni-load-more>
    <view v-else>
      <!-- 评论为空时展示 -->
      <view v-if="!childComment.length">
        <u-empty icon-size="200" text="抢沙发" src="https://cdn.uviewui.com/uview/empty/comment.png"></u-empty>
      </view>
      <view v-else>
        <view class="childItem list" v-for="item in childComment" :key="item._id">
          <comment-item :item="item" @del_comment="del_comment" :childState="true"></comment-item>
        </view>
      </view>
    </view>


    <view>
      <comment-frame :childState="true" :placeholder="`${placeholder}`" :commentObj="commentObj"
        @up_comment_data="getComment(0)">
      </comment-frame>
    </view>
  </view>
</template>

<script>
  import {
    reactive,
    ref,
    toRefs
  } from "vue"
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const db = uniCloud.database()
  export default {
    setup() {
      const data = reactive({
        replyItem: {},
        // 发布评论时需要的数据
        commentObj: {
          comment_type: 1,
          article_id: "",
          comment_state: true,
          reply_user_id: "",
          reply_comment_id: ""
        }
      })
      const placeholder = ref("")
      const load_more = ref("loading")
      const childComment = ref([])
      onLoad((e) => {
        data.replyItem = uni.getStorageSync("replayItem")
        placeholder.value = data.replyItem.user_id[0].nickname ? data.replyItem.user_id[0].nickname : data.replyItem
          .user_id[0].username
        data.commentObj.article_id = data.replyItem.article_id
        data.commentObj.reply_user_id = data.replyItem.user_id[0]._id
        data.commentObj.reply_comment_id = data.replyItem._id
        getComment()
      })
      // 前端无感删除评论
      const del_comment = (id) => {
        childComment.value = childComment.value.filter(elm => elm._id != id)
      }
      // 获取评论数据
      const getComment = async (index) => {
        // 发布评论后 300毫秒的loading状态
        if (index == 0) {
          uni.showLoading();
          setTimeout(() => {
            uni.hideLoading();
            uni.showToast()
          }, 300);
        }
        // 两表联查获取评论数据
        let commentTemp = db.collection("pyq_comment").where(
          `article_id == "${data.replyItem.article_id}" &&  comment_state == true && comment_type == 1 && reply_comment_id == "${data.replyItem._id}"`
        ).orderBy("comment_date desc").getTemp()
        let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp()
        const res = await db.collection(commentTemp, userTemp).get()
        childComment.value = res.result.data
        load_more.value = "no-more"
      }
      return {
        ...toRefs(data),
        placeholder,
        childComment,
        getComment,
        del_comment,
        load_more
      }
    }
  }
</script>

<style lang="scss" scoped>
  .reply {
    .top {
      padding: 16rpx 18rpx;
      border-bottom: 15rpx solid #eee;
    }

    .childItem {
      border-bottom: 1px solid #e3dcdc;
      margin: 0px 20rpx;
      padding-top: 26rpx;
    }
  }
</style>
